<template>
	<!-- 电话 -->
	<cl-dialog
		:visible.sync="visible"
		title="拨打电话"
		width="500px"
		:props="{
			appendToBody: true,
			closeOnClickModal: false
		}"
		:controls="['close']"
	>
		<p class="vmphone">请使用工作手机的手机号： {{ vmPhone.workMobile }}</p>
		<p class="vmphone">
			拨打：<el-button type="primary" plain v-clipboard:copy="vmPhone.virtualMobile">
				<h2>{{ vmPhone.virtualMobile }}</h2>
			</el-button>
		</p>
		<template #footer>
			<el-button @click="visible = false">关闭</el-button>
		</template>
	</cl-dialog>
</template>
<script>
	export default {
		props: {
			detail: {
				type: Object,
				default: () => ({})
			},
			type: {
				type: String,
				default: "customer"
			}
		},
		data() {
			return {
				visible: false,
				vmPhone: {}
			};
		},
		methods: {
			async open() {
				const { cus_id } = this.detail;
				const data = await this.$service.clue.getVmphone({
					id: cus_id,
					type: this.type
				});
				this.vmPhone = data;
				this.visible = true;
			}
		}
	};
</script>
<style lang="scss" scoped>
	.vmphone {
		text-align: center;
		margin: 10px 0;
		.el-button--primary.is-plain {
			&:hover,
			&:focus {
				background-color: mix(#fff, $primary, 90%);
				border-color: $color-primary;
				color: $color-primary;
			}
		}
	}
</style>
